<template>
    <div class="timeline-home my-message">
        <div class="year">2017年</div>
        <f7-card class="news-card self-card">
            <f7-card-header>
                <ul class="msg-list">
                    <li class="msg-item clearfix">
                        <div class="avatar">
                            <img src="../../assets/images/test.jpg" alt="">
                        </div>
                        <div class="msg">
                            <p class="type">系统消息</p>
                            <p class="detail">老李同志回复了你的评论</p>
                            <div class="relative comment">
                                <ul>
                                    <li>
                                        <f7-link class="name">张大大</f7-link>:这个作者写的好，真是写的太好了
                                    </li>
                                    <li>
                                        <f7-link class="name">老李同志</f7-link>:这个作者写的好，真是写的太好了
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </li>
                    <li class="msg-item clearfix">
                        <div class="avatar">
                            <img src="../../assets/images/test.jpg" alt="">
                        </div>
                        <div class="msg">
                            <p class="type">系统消息</p>
                            <p class="detail">老李同志请求加为好友</p>
                            <div class="relative action">
                                <f7-button>添加好友</f7-button>
                            </div>
                        </div>
                    </li>
                    <li class="msg-item clearfix">
                        <div class="avatar">
                            <img src="../../assets/images/test.jpg" alt="">
                        </div>
                        <div class="msg">
                            <p class="type">系统消息</p>
                            <p class="detail">老李同志点赞了你的评论</p>
                            <div class="relative comment">
                                <ul>
                                    <li>
                                        <f7-link class="name">张大大</f7-link>:这个作者写的好，真是写的太好了
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </li>
                </ul>
            </f7-card-header>
        </f7-card>
        <p class="load-more">
            <f7-link>查看更多>></f7-link>
        </p>
    </div>
</template>

<style lang="scss">
@import "../../assets/css/common.scss";
.my-message {
    .card-header {
        padding: 0 15px;
    }

    .msg-list{
        width: 100%;
        margin: 0;
    }

    .msg-item{
        margin: 15px 0;
        padding-bottom: 10px;
        border-bottom: 1px dotted #999;
        overflow: hidden;

        &:last-of-type{
            border: none;
        }
    }

    .avatar {
       float: left;
       width: 60px;
       height: 50px;
       overflow: hidden;
       border-radius: 5px;

       img {
           display: block;
           width: 100%;
           min-height: 100%;
       }
    }

    .msg {
        padding-left: 70px;

        p{
            margin: 0 0 5px 0;
        }

        .type {
            margin-bottom: 8px;
            font-size: 12px;
            color: #999;
        }

        .detail {
            font-size: 14px;
            margin-bottom: 8px;
        }
    }

    .comment {
        font-size: 14px;
        padding: 5px 10px;
        background: #eee;

        li {
            margin: 5px 0;
        }

        .name {
            display: inline;
            color: #259b24;
            line-height: initial;
        }
    }

    .action {
        .button {
            display: inline-block;
        }
    }
}
</style>

